<template>
  <div class="wp">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="classify">
      <div class="cedao">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="(v,i) in classifyArr"
            :key="i"
            :title="v.classify"
            @click="clickId(v.id)"
          />
        </van-sidebar>
      </div>
      <div class="banner">
        <div class="brand" v-for="(v,i) in content" :key="i">
          <span>{{v.title}}</span>
          <div class="shop">
            <div class="shop1">
              <div class="shop1-1" v-for="(item,index) in data[i]" :key="index" @click="doShoops(item.id)">
                <div>
                  <img class="img1" :src="`${item.imgurl}`" alt />
                </div>
                <div class="zhi">{{item.title}}</div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "classify",
  layout: true,
  data() {
    return {
      activeKey: 0,
      value: "",
      id: "",
      content: "",
      data: "",
    };
  },
  methods: {
    ...mapActions("classify", ["getClassify", "getContent", "getList"]),
    async onChange(index) {
      let r = this.contentArr.filter((v) => {
        return this.id == v.cid;
      });
      this.content = r;
      let arr = [];
      console.log(this.content);
      for (let i = 0; i < this.content.length; i++) {
        let r1 = await this.getList({ id: this.content[i].tids });
        arr.push(r1.data);
      }
      this.data = arr;
    },
    clickId(id) {
      this.id = id;
    },
    doShoops(id){
      console.log(id);
      this.$router.push({path: "/Lvar", query : {id}})
    }
  },
  async mounted() {
    await this.getClassify();
    await this.getContent();
    let r = this.contentArr.filter((v) => {
      return v.cid == 1;
    });
    this.content = r;
    let arr = [];
    for (let i = 0; i < this.content.length; i++) {
      let r1 = await this.getList({ id: this.content[i].tids });
      arr.push(r1.data);
    }
    this.data = arr;
    console.log(this.data);
  },
  computed: {
    ...mapState("classify", ["classifyArr", "contentArr", "listArr"]),
  },
};
</script>

<style scoped>
.classify {
  display: flex;
  justify-content: space-between;
}

.van-sidebar {
  width: 1.5rem;
}

.banner {
  width: 5rem;
  margin: 0 0.1rem;
  overflow: hidden;
  overflow-y: auto;
  height: 9rem;
}

.img img {
  width: 100%;
}

.brand {
  font-size: 0.25rem;
  /* margin-top: 0.35rem; */
}

.shop {
  margin-top: 0.15rem;
}

/* .shop1 {
  display: flex;
  justify-content: space-between;
} */

.clear {
  clear: both;
}

.shop1-1 {
  width: 1.58rem;
  height: 1.6rem;
  text-align: center;
  float: left;
}

/* .shop1-1:first-child img {
  width: 0.8rem;
  height: 0.8rem;
} */
.img1 {
  width: 1.1rem;
  height: 1rem;
}

.zhi {
  font-size: 0.23rem;
}

.cedao {
  overflow: hidden;
  overflow-y: auto;
  height: 9.5rem;
}

.wp {
  height: 10.5rem;
}

span {
    margin-left: 0.2rem;
}

.cedao >>> .van-sidebar-item__text {
    font-size: 0.25rem;
}
</style>